<template>
  <div>

    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" ref="userForm" label-width="120px" style="width: 85%;">

        <el-form-item 
          label="帐号" 
          prop="account"
          :rules="[
            {required: true, message: '请输入帐号', trigger: 'change' }
          ]">
          <el-input type="text" clearable v-model="form.account"></el-input>
        </el-form-item>

        <el-form-item 
          label="密码" 
          prop="password"
          :rules="[
            {required: true, message: '请输入密码', trigger: 'change' }
          ]">
          <el-input type="password" clearable v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item 
          label="昵称" 
          prop="nickName"
          :rules="[
            {required: true, message: '请输入昵称', trigger: 'change' }
          ]">
          <el-input type="text" clearable v-model="form.nickName"></el-input>
        </el-form-item>

        <el-form-item 
          label="备注">
          <el-input type="text" clearable v-model="form.remark"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEdit(false)">取 消</el-button>
        <SubmitButton 
          type="primary" 
          size="" 
          :ref-form="()=>{return this.$refs['userForm'];}" 
          :post-option="{url: addUrl, data: encryptForm(), callback: addCB }">
          确定
        </SubmitButton>
      </div>

    </el-dialog>

  </div>
  
</template>


<script>


  import SubmitButton from '../common/SubmitButton'

  import UserInfoApi from '../../api/UserInfoApi'

  import Md5Kit from '../../kit/Md5Kit'
  import JsonKit from '../../kit/JsonKit'  



  export default {
  	components: {
  		SubmitButton
  	},
  	data(){
  	  return {

        form: {
          account: '',
          password: '',
          nickName: '',
          remark: ''
        },

        addUrl: UserInfoApi.URL_ADD,
  	  }
  	},
    props: ['isShow'],
  	computed: {
      dialogVisible: {
        get: function(){
          return this.isShow;
        },
        set: function(newValue){
          this.closeEdit(false);
        }
      }
  	},
  	created(){
  	  
  	},
  	methods: {
      addCB(json){
        this.closeEdit(true);
      },
      closeEdit(isSuccess){
        this.form.remark = '';
        this.$refs['userForm'].resetFields();
        this.$root.eventHub.$emit('closeEditDialog', isSuccess);
      },
      encryptForm(){
        let form = JsonKit.copyObj(this.form);
        form.password = Md5Kit.encryptMd5(form.password);
        return form;
      }
  	}
  }
</script>

